<%= header %>
<!-- add an image so the screen is painted before Boomerang loads -->
<img src="/delay?delay=100&amp;file=/assets/img.jpg&amp;id=100" style="width:100px;"/>
<%= boomerangScript %>
<img src="/delay?delay=3000&amp;file=/assets/img.jpg&amp;id=2000" style="width:1300px;"/>
<img src="/delay?delay=2000&amp;file=/assets/img.jpg&amp;id=1000" style="width:800px;"/>
<img src="/delay?delay=1000&amp;file=/assets/img.jpg&amp;id=500" style="width:400px;"/>
<script src="36-cls.js" type="text/javascript"></script>
<script>
BOOMR_test.init({
	testAfterOnBeacon: true,
	Continuity: {
		enabled: true,
		monitorLayoutShifts: true
	}
});

var clsScoreOnBeaconSend = 0;
var clsScore = 0;
var observer;

function onBeforeBeaconSend() {
	clsScoreOnBeaconSend = clsScore;
	observer.disconnect();
}

window.BOOMR.subscribe("before_beacon", onBeforeBeaconSend, null, this);

observer = new window.PerformanceObserver(function(list) {

	var entries, i;

	entries = list.getEntries();

	for (i = 0; i < entries.length; i++) {
		if (!entries[i].hadRecentInput) {
			clsScore += entries[i].value;
		}
	}
});

observer.observe({ type: "layout-shift", buffered: true });

</script>
<script src="/delay?delay=2500&amp;file=/assets/blank.js"></script>
<%= footer %>
